<template>
    <div id="home">
        <!-- 头信息 -->
        <Homeheader @inputclick="inputclick" :search="search" />
        <!-- 搜索模态框 -->
        <div :class="search ? 'searchhome' : ''">
            <!-- 遮罩层 -->
        </div>
        <div v-if="search" class="search">
            <el-input placeholder="在这里搜索" v-model="inputsearch" @keyup.enter="searchs">
                <template #prefix>
                    <span class="iconfont icon-sousuo"></span>
                </template>
            </el-input>
            <p style="font-size: 3vh; color: #909399">历史记录</p>
            <ul>
                <li style="height: 3vh;" v-for="(item, index) in searcharr" :key="index">{{ item }}</li>
            </ul>
        </div>
        <!-- 内容 -->
        <div id="content">
            <!-- 左侧 -->
            <div id="left-main">
                <div id="left-top">
                    <div id="left-top-hellow">
                        <span id="s1">早上好，按序</span>
                        <span id="s2">为客户提供最好的服务</span>
                    </div>
                    <div id="left-top-hellow">
                        <span id="s1">{{ data.time }}</span>
                        <span id="s2"> {{ data.year }}</span>
                    </div>

                </div>
                <div id="left-type">
                    <div id="zsr">
                        <div id="zsr1">
                            <p class="title">总收入</p>
                            <div class="zsr-icon">
                                <span class="iconfont icon-qian"></span>
                            </div>
                        </div>
                        <div id="zsr2">
                            ￥{{ prices }}
                        </div>
                    </div>
                    <div id="zsr">
                        <div id="zsr1">
                            <p class="title">进行中</p>
                            <div class="zsr1-icon">
                                <span class="iconfont icon-naozhong"></span>
                            </div>
                        </div>
                        <div id="zsr2">
                            {{ jxz }}
                        </div>
                    </div>
                    <div id="zsr">

                        <div id="zsr1">
                            <p class="title">等待中</p>
                            <div class="zsr2-icon">
                                <span class="iconfont icon-wenjian"></span>
                            </div>
                        </div>
                        <div id="zsr2">
                            {{ ddz }}
                        </div>
                    </div>
                </div>
                <div id="left-info">
                    <div id="infos">
                        <div class="infos-box">
                            <p class="title">热门菜肴</p>
                            <p class="p1">查看全部</p>
                        </div>
                        <div id="infos-box1" style="overflow: auto">
                            <p v-if="cuisinelist.length == 0">今日还没卖菜</p>
                            <ul>
                                <li v-for="(item, index) in cuisinelist" :key="item._id">
                                    <div>
                                        {{ index + 1 }}
                                    </div>
                                    <img :src="item.img">
                                    <div class="title1">
                                        <span>{{ item.name }}</span>
                                        <!-- <span>订单：{{ item.nums }}</span> -->
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="infos">
                        <div class="infos-box">
                            <p class="title">售卖</p>
                            <p class="p1">查看全部</p>

                        </div>
                        <div id="infos-box1" style="overflow: auto">
                            <p v-if="cuisinelist.length == 0">所有库存商品已准备就绪！</p>
                            <ul>
                                <li v-for="(item, index) in cuisinelist" :key="item._id">
                                    <div>
                                        {{ index + 1 }}
                                    </div>
                                    <img :src="item.img">
                                    <div class="title1">
                                        <span>{{ item.name }}</span>
                                        <!-- <span>订单：{{ item.nums }}</span> -->
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div id="right-main">
                <div id="mains">
                    <ul id="ul1">
                        <li :class="liishow == false ? 'liishow' : ''" @click="clickbtn(true)">进行中</li>
                        <li :class="liishow == true ? 'liishow' : ''" @click="clickbtn(false)">等待付款</li>
                    </ul>
                    <div id="search">
                        <a-input v-model:value="value" placeholder="搜索订单">
                            <template #prefix>
                                <span class="iconfont icon-sousuo"></span>
                            </template>
                        </a-input>
                    </div>

                    <div id="right-con" v-if="orderlist.length == 0" v-show="btu">
                        <div id="icon-box">
                            <span class="iconfont icon-wj-wjxg "></span>
                        </div>
                        <div id="p-box">
                            <span class='p1'>您没有任何订单</span>
                            <span class='p2'>您今天尚未收到任何订单</span>
                        </div>
                        <el-button type="primary" @click="$router.push('/createOrder')">创建订单</el-button>
                    </div>
                    <div id="right-con1" v-if="copy.length != 0" v-show="btu">
                        <ul>
                            <li v-for="item in copy" :key="item._id">
                                <div class='a12'> {{ item.Table_name }}</div>
                                <div class="top1">
                                    <div class="top11">
                                        <span class="span1">{{ item.name }}</span>
                                        <span :class="item.state==1?'span2':'span2 aw2'" >{{ ace(item.state) }}</span>
                                    </div>
                                    <div class="top12">
                                        <span class="span1">{{ item.personNum }}菜肴</span>
                                        <span class="span2">{{ acf(item.state) }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 付款 -->
                    <div id="right-con1" v-if="copy.length != 0" v-show="!btu">
                        <ul>
                            <li v-for="item in copy" :key="item._id">
                                <div class='a12'> {{ item.Table_name }}</div>
                                <div class="top1">
                                    <div class="top11">
                                        <div>
                                            <p class="span1">{{ item.name }}</p>
                                            <p>{{ item.personNum }}菜肴</p>
                                        </div>
                                        <el-button type="primary" @click="() => {router.push(`/seata?id=${item._id}`) }">付款</el-button>
                                    </div>

                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航 -->
        <Homefooter />
    </div>
</template>
<script setup lang="ts">
import Homeheader from './pages/Homeheader.vue';
import Homefooter from './pages/Homefooter.vue';
import { ref, reactive, onMounted, } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter();
import Dayjs from 'dayjs';
import axios from 'axios';
const value = ref<string>('');
let shelllist = reactive([])  // 售卖列表
let orderlist = reactive([])  // 订单列表
let cuisinelist = reactive([]) //菜品列表
let data = reactive({ // 用来处理时间
    year: '',
    time: ''
})
let jxz = ref(0)
let ddz = ref(0)
let prices = ref(0)
let btu = ref(true)
const clickbtn = (state) => {
    liishow.value = !state
    btu.value = state
    console.log(state);
    if (state) {
        copy = orderlist.filter((item: any) => {
            return item.state < 2
        })
    } else if (!state) {
        copy = orderlist.filter((item: any) => {
            return item.state == 2
        })
    }

}
// 控制搜索模态框
let search = ref(false)
// 子组件的input点击
let inputclick = (ele: any) => {
    search.value = ele

}
let inputsearch = ref('')
let searcharr = reactive<any>(localStorage.getItem('search') ? JSON.parse(localStorage.getItem('search')) : [])
console.log(searcharr);

// 搜索
let searchs = () => {
    console.log(inputsearch);
    if (inputsearch.value == '座位') {
        router.push('/seat')
    } else if (inputsearch.value == '更多') {
        router.push('/more')
    }
    searcharr.unshift(inputsearch.value)
    if (searcharr.length > 5) {
        searcharr.pop()
    }
    localStorage.setItem('search', JSON.stringify(searcharr))

}

function ace(state: any) {
    if (state == 0) {
        return '进行中'
    } else if (state == 1) {
        return '准备好'
    }
}
function acf(state: any) {
    if (state == 0) {
        return '正在制作'
    } else if (state == 1) {
        return '等待上桌'
    }
}
// 生命周期
onMounted(() => {
    // 展示菜品
    getshowcuisine()
    getordersy()
    getcategetuserorder()
})
const getcategetuserorder = () => {
    axios.get(`http://127.0.0.1:3000/categetuserorder`)
        .then(res => {
            console.log(res.data.data);
            // 进行中
            res.data.data.forEach((item: any) => {
                console.log(item);
                if (item._id == 0) {
                    jxz.value = item.count
                }
                else if (item._id == 1) {
                    ddz.value = item.count
                }
            })
        })
}
let liishow = ref(false)
// 时间转换函数
setInterval(() => {
    data.year = Dayjs().format('YYYY年 MM月 DD日')
    data.time = Dayjs().format('HH:mm:ss')

}, 1000)

// 展示菜品
async function getshowcuisine() {
    await axios.get('http://127.0.0.1:3000/showcuisine')
        .then((res: any) => {
            if (res.data.code == 200) {
                cuisinelist = res.data.data

            }
        })
}
let copy = reactive([])
async function getordersy() {
    await axios.get('http://127.0.0.1:3000/getordersy')
        .then((res: any) => {
            if (res.data.code == 200) {
                orderlist = res.data.data
                copy = res.data.data
                clickbtn(true)
                // 总价赋值
                for (let i = 0; i < orderlist.length; i++) {
                    prices.value += orderlist[i].orderprice
                }
            }
        })
}


</script>
<style lang="less" scoped>
.el-input {
    height: 5vh;
}

li {
    list-style: none;
}

.searchhome {
    background-color: #000;
    width: 100vw;
    height: 100vh;
    opacity: 0.8;
    position: fixed;
    z-index: 999;
}

#home {
    width: 100%;
    height: 100vh;
    background-color: #E5E5E5;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 10vh;

    .search {
        background-color: #fff;
        width: 40%;
        height: 40vh;
        position: fixed;
        left: 30%;
        top: 20vh;
        z-index: 999;
        border: 1px solid #ccc;
        border-radius: 1vh;
        padding: 2vh 3vh;
    }

    #content {
        width: 100%;
        height: 83vh;
        display: flex;
        justify-content: space-between;

        #left-main {
            width: 60%;
            height: 100%;

            // background-color: rgb(243, 221, 221);
            #left-top {
                width: 95%;
                height: 12%;
                margin: 0 auto;
                // background-color: rgb(221, 221, 221);
                display: flex;
                justify-content: space-between;

                #left-top-hellow {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    #s1 {
                        width: 100%;
                        font-size: 2.5vh;
                        font-weight: 500;
                    }

                    #s2 {
                        width: 100%;
                        font-size: 1.4vh;
                        color: #636566;
                    }
                }

            }

            #left-type {
                width: 100%;
                height: 28%;
                // background-color: rgb(204, 204, 204);
                display: flex;
                justify-content: space-around;
                align-items: center;

                #zsr {
                    width: 30%;
                    height: 90%;
                    background-color: #fff;
                    border-radius: 2vh;

                    #zsr1 {
                        width: 100%;
                        height: 40%;
                        display: flex;
                        justify-content: space-between;
                    }

                    #zsr2 {
                        height: 50%;
                        width: 100%;
                        // background-color: red;
                        display: flex;
                        justify-content: center;
                        align-items: flex-start;
                        font-size: 4vh;
                    }

                    .title {
                        display: inline-block;
                        margin: 2vh;
                        padding: 0;
                        font-size: 1.6vh;
                    }

                    .zsr-icon {
                        margin: 1vh;
                        width: 5vh;
                        height: 5vh;
                        background-color: #DCF7EA;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 1vh;

                        .iconfont {
                            color: green;
                        }
                    }

                    .zsr1-icon {
                        margin: 1vh;
                        width: 5vh;
                        height: 5vh;
                        background-color: #FFEDD5;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 1vh;

                        .iconfont {
                            color: orange;
                        }
                    }

                    .zsr2-icon {
                        margin: 1vh;
                        width: 5vh;
                        height: 5vh;
                        background-color: #DCEEFE;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 1vh;

                        .iconfont {
                            color: #0253B6;
                        }
                    }
                }
            }

            #left-info {
                width: 97%;
                height: 60%;
                margin: 0 auto;
                // background-color: rgb(177, 177, 177);
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                #infos {
                    width: 49%;
                    height: 92%;
                    background-color: #fff;
                    border-radius: 2vh;

                    .title {
                        display: inline-block;
                        // margin: 2vh;
                        padding: 0;
                        font-size: 1.8vh;
                        font-weight: 700;
                    }

                    .infos-box {
                        margin: 0 auto;
                        height: 9vh;
                        width: 90%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .p1 {
                            color: #025CCA;
                        }
                    }

                    #infos-box1 {
                        height: 60%;
                        width: 100%;
                        display: flex;
                        padding-left: 5vh;
                        box-sizing: border-box;

                        // justify-content: center;
                        // align-items: center;
                        ul {
                            width: 100%;
                        }

                        ul li {
                            width: 100%;
                            display: flex;
                            align-items: center;

                        }

                        ul li div {
                            width: 10%;
                        }

                        ul li img {
                            width: 6vh;
                            height: 6vh;
                            border-radius: 50%;

                        }

                        .title1 {
                            width: 35%;
                            text-align: center;

                        }

                        ul li span {
                            display: block;
                            font-size: 1.3vh;

                        }

                    }
                }
            }
        }

        #right-main {
            width: 39.5%;
            height: 100%;
            display: flex;
            justify-content: left;
            align-items: center;

            #mains {
                width: 96%;
                min-height: 95%;
                background-color: #fff;
                border-radius: 2vh;
                display: flex;
                flex-direction: column;
                align-items: center;

                #ul1 {
                    width: 90%;
                    height: 20%;
                    padding: 0;
                    margin: 2vh 0;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    li {
                        width: 49.9%;
                        height: 7vh;
                        line-height: 7vh;
                        text-align: center;
                        background-color: #f1f1f1;
                        border-radius: 1.5vh;
                    }

                    .liishow {
                        background-color: #025CCA;
                        color: #fff;
                    }
                }

                #search {
                    width: 90%;
                }

                #right-con {
                    width: 100%;
                    margin-top: 10vh;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    #icon-box {
                        width: 13vh;
                        height: 13vh;
                        background-color: #F0F8FF;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .iconfont {
                            font-size: 5vh;
                            color: #0253B6;
                        }
                    }

                    #p-box {
                        width: 90%;
                        height: 10vh;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .p1 {
                            margin-bottom: 0;
                            font-size: 2.5vh;
                        }

                        .p2 {
                            font-size: 1.5vh;
                        }

                    }

                    .el-button--primary {
                        background-color: #0253B6;
                        border-radius: 1vh;
                    }

                    .el-button--primary:focus {
                        background-color: #0676ff;
                        border-radius: 1vh;
                    }

                }

                #right-con1 {
                    width: 100%;
                    // margin-top: 10vh;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;

                    ul {
                        width: 100%;
                    }

                    li {
                        width: 100%;
                        height: 10vh;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .a12 {
                            width: 6vh;
                            height: 6vh;
                            margin: 2vh;
                            background-color: #F0F8FF;
                            border-radius: 1vh;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #0253B6;
                            font-size: 2vh;
                            box-sizing: border-box;
                        }

                        .top1 {
                            flex-grow: 1;
                            margin-right: 3vh;
                            box-sizing: border-box;

                            .top11 {
                                display: flex;
                                justify-content: space-between;

                                .span1 {
                                    font-size: 1.7vh;
                                    font-weight: 600;
                                }

                                .span2 {
                                    width: 7vh;
                                    height: 2.5vh;
                                    background-color: #DCF7EA;
                                    border-radius: 1vh;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }

                            .top12 {
                                display: flex;
                                justify-content: space-between;

                                .span1 {
                                    color: #636566;
                                }

                                .span2 {
                                    width: 7vh;
                                    height: 2.5vh;
                                    color: #636566;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }

                        }
                    }
                }

            }
        }
    }
}
.aw2{
    
    background:#f0f8ff !important;
}
</style>